<template>
  <div class="shopCar">
    <el-card shadow="always"> 
      <span>购物车</span> 
      <el-button class="manage" size="medium" type="primary" @click="manageFlag = !manageFlag">{{ manageFlag ? '管理' : '取消' }}</el-button>
    </el-card>
    <el-card class="shopCarContent" shadow="always" v-height>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        height="calc(100%)"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column type="index" width="55" label="序号"></el-table-column>
        <el-table-column label="图片" width="100">
          <template slot-scope="scope">
            <img class="imgClass" :src="scope.row.goodsUrl" alt="" />
          </template>
        </el-table-column>
        <el-table-column prop="goodsBrand" label="品牌"> </el-table-column>
        <el-table-column prop="goodsTitle" label="标题"> </el-table-column>
        <el-table-column prop="goodsPrice" label="价格"> </el-table-column>
        <el-table-column label="操作" width="210" align="center">
          <template slot-scope="scope">
            <el-popover
              placement="top"
              width="200"
              trigger="manual"
              v-model="visible[scope.$index]"
            >
              <p>确定删除这个商品么？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="cancelHandle(scope)"
                  >取消</el-button
                >
                <el-button type="primary" size="mini" @click="sureHandle(scope, scope.row)"
                  >确定</el-button
                >
              </div>
              <!-- <el-button slot="reference" @click="visible = !visible"
                >手动激活</el-button
              > -->
              <el-input-number
                slot="reference"
                :name="`number${scope.$index}`"
                v-model="scope.row.goodsNum"
                @change="handleChange(scope, scope.row)"
                :min="0"
                :max="scope.row.limitNum || 'Infinity'"
                :label="'描述文字'"
              ></el-input-number>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card class="shopCarBtn" shadow="always">
      <div class="shopCarAccount">
        <div>已选{{ shopCarAccountNum.total }}件</div>
      </div>
      <div v-if="manageFlag" class="shopCarAmount">
        <div class="shopCarAmount-amount">
          合 计：￥{{ shopCarAccountNum.price }}
        </div>
        <div class="shopCarAmount-discount">
          共 减：￥{{ shopCarAccountNum.price }}
        </div>
      </div>
      <el-button v-if="manageFlag" type="success" :disabled="!multipleSelection.length" @click="checkOut">结 算</el-button>
      <el-button v-else type="danger" :disabled="!multipleSelection.length" @click="delGoods">删 除</el-button>

      
    </el-card>
     <pdfTemplate ref="pdfTemplate" :tableData="tableData" v-show="false"/>
  </div>
</template>

<script>
import { getGoodsCarDetail, updateShopCar, deleteShopCar, printPdf, deleteShopCarMany } from "@/api/goods";
import pdfTemplate from './printPdfTemplate'
export default {
  name: "",
  components: {
    pdfTemplate
  },
  data() {
    return {
      tableData: [],
      multipleSelection: [],
      visible: [],
      manageFlag: true
    };
  },
  computed: {
    shopCarAccountNum() {
      let total = 0;
      let price = 0;
      this.multipleSelection.forEach((e) => {
        total += e.goodsNum;
        price += e.goodsNum * e.goodsPrice;
      });
      return { total, price };
    },
  },
  watch: {},
  created() {},
  async mounted() {
    await this.getShopCarDetail();
  },
  methods: {
    // 获取购物车详情
    async getShopCarDetail() {
      let res = await getGoodsCarDetail();
      this.tableData = res.data;
    },
    cancelHandle(scope) {
      this.$nextTick(() => {
        scope.row.goodsNum = 1
        this.visible[scope.$index] = !this.visible[scope.$index]
      })
    },
    // 删除商品
    async sureHandle(scope, row) {
      let params = {
        goodsNum: row.goodsNum,
        goodsCode: row.goodsCode,
      };
        await deleteShopCar(params)
        scope.row.goodsNum = 0
        this.visible[scope.$index] = !this.visible[scope.$index]
        await this.getShopCarDetail()
    },
    // 数量更新
    async handleChange(scope, row) {
      if(row.goodsNum == 0) {
        this.visible[scope.$index] = true
      }
      let params = {
        goodsNum: row.goodsNum,
        goodsCode: row.goodsCode,
      };
      await updateShopCar(params);
    },
    // 勾选商品
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 打印清单
    checkOut() {
      let params = {
        el: JSON.stringify(this.$refs.pdfTemplate.$el.innerHTML)
      }
      printPdf(params).then(res => {

      })
    },
    // 批量删除
    delGoods() {
      let temp = this.multipleSelection.map(e => {
        return e.goodsCode
      })
      deleteShopCarMany({list:temp}).then(res => {
        this.getShopCarDetail();
      })
    }
  },
};
</script>

<style scoped lang='less'>
.shopCar {
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  .manage{
    float: right;
    margin-top: -7px;
  }
  .shopCarContent {
    margin-top: 20px;
    height: calc(100% - 170px);
    /deep/ .el-card__body{
      height: 100%;
      box-sizing: border-box;
    }
  }
  .shopCarBtn {
    margin-top: 20px;
    text-align: right;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 9;
  }
  .imgClass {
    display: inline-block;
    width: 80px;
    height: 80px;
  }
  .shopCarAccount {
    float: left;
    margin-right: 20px;
  }
  .shopCarAmount {
    float: left;
    .shopCarAmount-amount {
      color: red;
    }
    .shopCarAmount-discount {
    }
  }
}
</style>